<template>
  <div class="menu" :value="activeNames">
    <h1>手风琴菜单</h1>
    <mcollaspeitem class="item" title='电器' name="1">
    </mcollaspeitem>
    <mcollaspeitem class="item" title="食品" name="2">
    </mcollaspeitem>
    <mcollaspeitem class="item" title="生活用品" name="3">
    </mcollaspeitem>
    <mcollaspeitem class="item" title="手机" name="4">
    </mcollaspeitem>
  </div>
</template>

<script>
import mcollaspeitem from "./collaspeitem.vue";

export default {
  name: "collapse",
  data(){
    return{
      value:[],
      activeNames:[]
    }
  },

  created() {
    this.$on('item-click',item=>{
      let index=this.value.indexOf(item.name);
      if(index>-1) {
        this.value.splice(index, 1);
      }//若存在则删除
      else{

        this.value.push(item.name);//不存在则添加
      }
    })
  },
  provide(){
    return{
      collapse:this
    }
  },
  components: {
    mcollaspeitem
  },
}
</script>

<style scoped>
.menu{
  background: #9F9F9F;
  width: 280px;
  position: absolute;
  top:0;
  left:0;
}
</style>
